<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>魔方天地</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/index.js" type="text/javascript"></script>
    <meta name="author" content="王逸瑶">
    <meta name="keywords" content="书店,叮叮书店,图书">
    <meta name="description" content="叮叮书店是一个销售书籍的网上书店。">
    <meta name="robots" content="homepage,follow">
</head>

<body>
<!--页眉-->
<div id="header-wrapper">
    <!--网站logo-->
    <header class="container">
        <div id="logo">
            <a href="homepage.html">
                <h1>魔方天地</h1>
            </a>
        </div>
        <div id="displaydate"></div>
        <div id="displaytime"></div>
    </header>
    <!--导航栏-->
    <div id="nav">
        <nav class="container">
            <ul>
                <li>
                    <a href="homepage.html">首页</a>
                </li>
                <li>
                    <a href="content/category.html">魔方教程</a>
                    <ul>
                        <li><a href="#">二阶</a></li>
                        <li>
                            <a href="#">三阶</a>
                        </li>
                        <li>
                            <a href="#">高阶</a>
                        </li>
                        <li>
                            <a href="#" style="display: inline-block">
                                异形>
                                <!--                                <img src = "images/展开.png" style="height: 15px;width: auto"></img>-->
                            </a>
                            <ul>
                                <li class="nav3">
                                    <a href="#">金字塔</a>
                                </li>
                                <li class="nav3">
                                    <a href="#">五魔方</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="content/specials.html">淘宝小店</a>
                </li>
                <li>
                    <a href="content/contact.html">联系我们</a>
                </li>
                <li>
                    <a href="content/about.html">关于我们</a>
                </li>
                <li>
                    <a href="content/favorite.html">我的收藏</a>
                </li>
            </ul>
            <div id="search">
                <form action="homepage.html" method="get">
                    <label>
                        <input type="search" placeholder="站内搜索">
                    </label>
                    <input type="submit" value="搜索">
                </form>
            </div>
<!--            <div></div>-->
<!--            <div id="menu-logo">-->
<!--                <a href="content/favorite.html">我的收藏</a>-->
<!--            </div>-->
        </nav>
    </div>
</div>
<div id="content-wrapper" class="container">
    <!--leftside-->
    <article>
        <!--advertise-->
        <div id="adv">
            <dl>
                <dt>
                    <a href="" id="a1">1</a>
                    <a href="" id="a2">2</a>
                    <a href="" id="a3">3</a>
                    <a href="" id="a4">4</a>
                </dt>
                <dd>
                    <a href="">
                        <img src="images/b-ad1.png" id="badimg" alt="广告"
                             style="alignment: center;width: 100%; height: auto">
                    </a>
                </dd>
            </dl>
        </div>
        <!--新手入门-->
        <section></section>
        <h2 class="title">新手入门</h2>
        <section class="newbie" id="newbie">
            <h3 class="title-show" id="newbie-title1">3x3魔方基础教程-层先法</h3>
            <h3 class="title-hide" id="newbie-title2">3x3魔方进阶教程-CFOP</h3>
            <div class="inside">
                <div id="inside1" class="inside-show">
                    <a href="#"><img src="images/prod2.jpg" alt="3x3魔方基础教程-层先法"></a>
                    <div class="newbie-content">
                        <p>层先法，就是指将魔方分为三层:
                            <mark>底层、中层、顶层</mark>
                            ，层复原。用层先法复原魔方一共分
                            <mark>七步</mark>
                            ，分别为:做好底层十字、调整底面角块、复原中层棱块、做好顶面十字、顶角归位、调整顶角位置、调整顶棱位置。做好这七步，魔方就可以成功复原了。
                        </p>
                    </div>
                    <div class="addfavor">
                        <a class="favor" href="content/favorite.html"><b>添加收藏</b></a> <a class="learn"
                                                                                         href="https://www.cubeskills.com/tutorials/the-beginners-method-for-solving-the-rubiks-cube">立刻学习</a>
                    </div>
                </div>
                <div id="inside2" class="inside-hide">
                    <a href="#"><img src="images/prod3.jpg" alt="3x3魔方进阶教程-CFOP"></a>
                    <div class="newbie-content">
                        <p>CFOP的是用四个步骤还原魔方的一种快速还原方法，竞速玩家一般使用的都是这种方法，还原步骤分别是，Cross→First 2 layers→Orientation of last
                            layer→Permutation of last
                            layer(即Cross→F2L→OLL→PLL)，也就是：底层十字→同时对好前两层→调整好最后一层的朝向→调整好最后一层的顺序（还原整个魔方）。</p>
                    </div>
                    <div class="addfavor">
                        <a class="favor" href="content/favorite.html"><b>添加收藏</b></a> <a class="learn"
                                                                                         href="https://www.cubeskills.com/tutorials">立刻学习</a>
                    </div>
                </div>
            </div>

        </section>

        <section class="alien">
            <h2 class="title">异形专区</h2>
            <section>
                <!--                <h3>金字塔魔方</h3>-->
                <div class="effect-1" id="effect-1">
                    <div class="image-box">
                        <img src="images/prod4.jpg" alt="金字塔魔方">
                    </div>
                    <div class="text-desc">
                        <h3>金字塔魔方</h3>
                        <p>一种四面体异型魔方。由德国科学家麦菲特Uwe
                            Meffert教授于1970年发明出，原本是他用于研究金字塔能量的模型，在研究过程中，意外的发明出金字塔魔方。看起来比较简单的它，的确比正阶魔方更容易学习与掌握。</p>
                        <br/>
                        <a class="btn" href="content/favorite.html">添加收藏</a> <a class="btn"
                                                                                href="https://www.cubeskills.com/tutorials">立即学习</a>
                    </div>
                </div>
            </section>
            <section>
                <!--                <h3>五魔方-十二面体魔方</h3>-->
                <div class="effect-1">
                    <div class="image-box">
                        <img src="images/prod5.jpg" alt="五魔方-十二面体魔方">
                    </div>
                    <div class="text-desc">
                        <h3>五魔方-十二面体魔方</h3>
                        <p>
                            五魔方（Megaminx），又叫做十二面体魔方，由Uwe Meffert发明，其每个面均是五边形，总共有50块可以移动的部分。
                            五魔方是世界魔方协会（WCA） [1] 的比赛项目之一。截至2020年的单次世界纪录是27.22 [2] 秒，平均世界是30.39秒，保持者均为Juan Pablo
                            Huanqui。单次中国纪录是32.09秒，平均中国纪录是35.98秒,保持者均为张赟量。
                        </p>
                        <a class="btn" href="content/favorite.html">添加收藏</a> <a class="btn"
                                                                                href="https://www.cubeskills.com/tutorials">立即学习</a>
                    </div>
                </div>
            </section>
        </section>
        <!--最常访问-->
        <section class="article-section">
            <h2 id="freq_title">最常访问</h2>
            <section>
                <h3>金字塔教程</h3>
                <a href="#"><img class="promotion" src=images/prod2.jpg alt="金字塔教程"></a>
                <div>
                    <a class="btn" href="content/favorite.html">加入收藏</a> <a class="btn"
                                                                            href="https://www.cubeskills.com/tutorials">立即学习</a>
                </div>
            </section>
            <section>
                <h3>五魔方教程</h3>
                <a href="#"><img class="promotion" src=images/prod3.jpg alt="五魔方教程"></a>
                <div>
                    <a class="btn" href="content/favorite.html">加入收藏</a> <a class="btn"
                                                                            href="https://www.cubeskills.com/tutorials">立即学习</a>
                </div>
            </section>
        </section>
    </article>
    <!--rightside-->
    <aside>
        <!--advertise-->
        <!--        <div class="border">-->
        <!--                        <img src="images/border.gif" alt="分割线">-->
        <!--        </div>-->
        <!--record-->
        <section class="record">
            <h2 class="title" style="text-align: left">魔方纪录</h2>
            <ul>
                <li class="rank">
                    <a href="https://cubingchina.com/results/rankings?region=World&event=333&gender=all&type=average"
                       class="rec">三阶世界前十</a>
                    <div class="more">
                        <a href="https://cubingchina.com/results/rankings?region=World&event=333&gender=all&type=average"
                           style="color: gray">点击查看更多</a>
                    </div>
                    <ul class="curr">
                        <li><a href="">Feliks Zemdegs</a></li>
                        <li><a href="">Yezhen Han (韩业臻)</a></li>
                        <li><a href="">Max Park</a></li>
                        <li><a href="">Ruihang Xu (许瑞航)</a></li>
                        <li><a href="">Sean Patrick Villanueva</a></li>
                        <li><a href="">Philipp Weyer</a></li>
                        <li><a href="">Tymon Kolasińsk</a>i</li>
                        <li><a href="">Patrick Ponce</a></li>
                        <li><a href="">Lucas Etter</a></li>
                        <li style="border-bottom: none"><a href="">Bill Wang</a></li>
                    </ul>
                </li>
                <li class="rank">
                    <a href="https://cubingchina.com/results/rankings?region=World&event=222&gender=all&type=average"
                       class="rec">二阶世界前十</a>
                    <div class="more">
                        <a href="https://cubingchina.com/results/rankings"
                           style="color: gray">点击查看更多</a>
                    </div>
                    <ul class="curr">
                        <li><a href=""> Martin Vædele Egdal</a></li>
                        <li><a href=""> Will Callan</a></li>
                        <li><a href="">Jiazhou Li (李佳洲)</a></li>
                        <li><a href="">Sky Guo (郭建欣)</a></li>
                        <li><a href="">Advay Sant</a></li>
                        <li><a href="">Zayn Khanani</a></li>
                        <li><a href=""> Maciej Czapiewski</a></li>
                        <li><a href="">Kevin Gerhardt</a></li>
                        <li><a href="">Ng Jia Quan (黄佳铨)</a></li>
                        <li style="border-bottom: none"><a href="">John Bacouël</a></li>
                    </ul>
                </li>
                <li style="text-align: right">
                    <a href="https://cubingchina.com/results/rankings?region=World&event=222&gender=all&type=average"
                       class="more" style="color: gray; top: 0"> >>进入粗饼网</a>
                </li>
            </ul>
        </section>
        <!--        <div class="border"><img src="images/border.gif" alt="分割线"></div>-->
        <!--category-->
        <div style="text-align: center">
            <section class="aside-section">
                <h2 class="title" style="text-align: left;">教程分类</h2>
                <ul>
                    <li><a href="content/category.html">三阶魔方基础教程</a></li>
                    <li><a href="content/category.html">三阶魔方进阶教程</a></li>
                    <li><a href="content/category.html">二阶魔方教程</a></li>
                    <li><a href="content/category.html">高阶魔方教程</a></li>
                    <li><a href="content/category.html">金字塔魔方教程</a></li>
                    <li><a href="content/category.html">五魔方魔方教程</a></li>
                </ul>
            </section>
            <!--cooperate-->
            <section class="aside-section">
                <h2 class="title" style="text-align: left;">合作伙伴</h2>
                <ul>
                    <li><a href="https://cubingchina.com/">粗饼·魔方赛事网</a></li>
                    <li><a href="https://www.worldcubeassociation.org/">WORLD CUBE ASSOCIATION</a></li>
                    <li><a href="https://www.cubeskills.com/">CubeSkills</a></li>
                    <li><a href="https://www.gancube.com/zh/">GANCUBE</a></li>
                </ul>
            </section>
        </div>
        <!--        <div class="border"><img src="images/border.gif" alt="分割线"/></div>-->
        <!--关于书店-->
        <section class="about">
            <h2 class="title" style="text-align: left;">关于本站</h2>
            <img src="images/about.gif" alt="魔方天地">
            <p>魔方天地成立于2021年5月，由浙江工业大学软件工程专业1904班王逸瑶所作，为前端大作业。若有不足，还望海涵。</p>
        </section>
        <!--        <section id="advert">-->
        <!--            <a href="#"><img src="images/ad1.jpg" alt="广告"></a>-->
        <!--            <a href="#"><img src="images/ad2.jpg" alt="广告"></a>-->
        <!--            <a href="#"><img src="images/ad3.jpg" alt="广告"></a>-->
        <!--        </section>-->
    </aside>
</div>
<!--页脚-->
<div id="footer-wrapper">
    <!--页脚导航-->
    <footer class="container">
        <section>
            <a href="homepage.html">首页</a> <a href="content/about.html">关于我们</a> <a href="#">服务条款</a> <a
                href="#">隐私策略</a> <a href="content/contact.html">联系我们</a>
        </section>
    </footer>
</div>
<!--版权标志-->
<section id="copyright">
    Copyright (C)
    <a href="homepage.html">魔方天地</a>
    2021-2022，All Rights Reserved |
    京ICP证000001号音像制品经营许可证
    <address>通讯地址：浙江工业大学屏峰校区&nbsp;&nbsp;电话：17857114514&nbsp;&nbsp;网管信箱：201906061915@zjut.edu.cn
        <a href="https://gitee.com/wyysteelhead_admin/cudingsite" style="font-size: 16px">代码开源地址</a>
    </address>

</section>
</body>

</html>